<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的发布',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view>
    <view class="page p-4">
      <k-list :loading="loading" :is-empty="!articleList.length">
        <article-card
          :mode="item.image.length > 1 ? 'spread' : 'swiper'"
          :imageKey="item.image.length > 1 ? 'image' : 'image.0'"
          :data="item"
          v-for="item in articleList"
          :key="item.id"
          @click="to(`pages-sub/post/post-detail?id=${item.id}`)"
        ></article-card>
      </k-list>
    </view>

    <float-bottom
      v-if="!userStore.systemConfig.is_check"
      customClass="min-h-[116rpx] flex items-center "
    >
      <view class="mx-[20rpx] w-full">
        <wd-button :round="false" custom-class="w-full" @click="to(`pages-sub/person/publishPost`)">
          去发布
        </wd-button>
      </view>
    </float-bottom>
  </view>
</template>

<script setup>
import { to } from '@/utils/navigation'
import useUserStore from '@/store/user'
import { fetchArticleList } from '@/service/article'
import useReachBottomLoadMore from '@/hooks/useReachBottomLoadMore'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const loadLogsParams = computed(() => ({ user_id: userInfo.value.id }))

const {
  data: articleList,
  loading,
  refresh,
  params,
} = useReachBottomLoadMore(fetchArticleList, loadLogsParams)

onShow(() => {
  refresh()
})
</script>

<style lang="scss" scoped>
.page {
  @include addSafeArea(146rpx);
}
</style>
